<script type="text/javascript" src="student/registerToCourses.js"></script>
<script type="text/javascript" src="shared/getPage.js"></script><!-- used in the loaded data -->
<link rel="stylesheet" type="text/css" href="style/coursesTable.css" />
<div id="main-availableCourses">
	<fieldset>
		<legend>Available courses: </legend>
		<table>
			<thead>
				<tr>
					<th style="width:28%;">Course name</th>
					<th style="width:15%;">Course id</th>
					<th style="width:5%;">Credit points</th>
					<th style="width:10%;">Group number</th>
					<th style="width:15%;">Moed A</th>
					<th style="width:15%;">Moed B</th>
					<th style="width:12%;">Register?</th>
				</tr>
			</thead>
			<tbody id="tableBody">
				<tr>
					<td colspan="7">Loading data...</td><!-- content received via ajax -->
				</tr>
			</tbody>
		</table>
	</fieldset>
	<script type="text/javascript">
		clearInterval(availableCoursesTimer);
		load('tableBody', 'student/ajax/availableCoursesTableBody.jsp');
		availableCoursesTimer = setInterval("load('tableBody', 'student/ajax/availableCoursesTableBody.jsp');", 10000);
	</script>
	<form id="registerForm" method="post" action="#">
		<div>
			<input type="hidden" name="username" value="<%=request.getUserPrincipal().getName() %>" />
			<input type="hidden" id="course" name="course" value=""/>
		</div>
	</form>
	<script type="text/javascript">
		setPostFormToServlet('registerForm', 'student/AvailableCourses');
	</script>
</div>
